<!--
 * @Author: panghu chenjh@datamargin.com
 * @Date: 2024-03-27 15:57:41
 * @LastEditors: panghu chenjh@datamargin.com
 * @LastEditTime: 2024-03-27 20:43:55
 * @FilePath: \vue3-vite-mall-admin-system\src\views\homeIndex.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="content">
    <el-row :gutter="20">
      <template v-if="orderStateList.length === 0">
        <el-col :span="6" v-for="i in 4" :key="i">
          <el-skeleton style="--el-skeleton-circle-size: 100px">
            <template #template>
              <el-card shadow="hover">
                <div class="t_title">
                  <el-skeleton-item variant="text" style="width: 40%;"/>
                  <el-skeleton-item variant="text" style="width: 10%;margin-left: auto;" />
                </div>
                <el-skeleton-item variant="text" style="width: 100%;"/>
                <div class="t_footer">
                  <el-skeleton-item variant="text" style="width: 40%;" />
                  <el-skeleton-item variant="text" style="width: 10%;margin-left: auto;"/>
                </div>
              </el-card>
              
            </template>
          </el-skeleton>

        </el-col>
      </template>
      <el-col :span="6" v-for="(item, i) in orderStateList" :key="i">
        <el-card shadow="hover">
          <div class="t_title">
            <span>{{ item.title }}</span>
            <el-tag :type="item.unitColor">{{ item.unit }}</el-tag>
          </div>
          <div class="t_main">
            {{ item.value }}
          </div>
          <div class="t_footer">
            <span>{{ item.subTitle }}</span>
            <span> <el-tag :type="item.unitColor">{{ item.subValue }}</el-tag></span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { orderStateApi } from '@/api/home.js'
import { ref } from 'vue'
let orderStateList = ref([])
const getOrderState = async () => {
  const res = await orderStateApi()
  if (res.msg && res.msg !== 'ok') return
  orderStateList.value = res.data.panels
}
getOrderState()
</script>


<style lang='less' scoped>
.content>.el-row {
  margin-top: 20px;
}

.t_title {
  display: flex;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #dbdbdb;
  padding-bottom: 5px;

  .el-tag {
    margin-left: auto;
  }
}

.t_main {
  font-size: 28px;
  line-height: 100px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #dbdbdb;
}

.t_footer {
  height: 30px;
  font-size: 14px;
  padding-top: 15px;
  display: flex;
  align-items: center;

  span:nth-child(2) {
    padding-left: 15px;
  }
}
</style>